阿嬤都看得懂的 JQuery 怎麼寫

昨天我們聊到怎麼使用 document 這個咒語，讓神燈精靈幫我們操縱 DOM。但是，每次都要重複寫 document.getElementsBy... 以及 .addEventListener() 實在太不 DRY 了吧！

沒錯，於是有人開始想，我們是否能夠把所有的 document 這種語法都合併呢？當我們想指定元素的時候，如果可以直接使用 CSS 選擇器挑出來，然後直接加上簡單的功能，讓我們可以直接操縱 DOM 元素，這樣不是很方便嗎？

沒錯，JQuery 這個已經盛行 10 年以上的外掛，就是幫助我們這些懶人高效工程師而產生的！在我們引入 JQuery 以後，我們以前要寫得很麻煩的

let pinkText = document.getElementsByClassName("pink")[0].childNodes[1]
pinkText.addEventListener("click",function(){
 	pinkText.innerText += "Clicked" 
})

現在只要寫成

$(".pink>p").click(function(){
  let text = $(".pink>p").text()
  $(".pink>p").text(text+" Clicked")
})

是不是很開心呢！

那麼，我們應該怎麼引入這個外掛呢？這個外掛是由 JavaScript 寫成的。換句話說，它其實就是個強者寫好的 .js 檔。因此，我們引入這個外掛的方法，就像我們昨天引入我們的 .js 檔那樣，寫在 body 標籤最後，用 script 標籤引入。引入的方法，可以是將整個 JQuery 套件下載下來，或者像前面提到 CDN 方式以往只引入也可以。

那麼，接下來就讓我們看看，怎麼使用 JQuery 簡化 JavaScript 在操縱 DOM 方面的語法吧！

首先，觀察上面的改寫，我們可以發現，我們可以使用錢字號 ("$", dollar sign) 加上圓括弧，並且在當中放上 CSS 選擇器的文字串，來找出網頁上的元素。

其次，我們不再需要使用 .addEventListener() 這個方法，來監聽元素發生的事件，而只需要使用 .click() 方法，裡面放上點擊事件發生後需要執行的功能即可。同理，我們也有 .dbclick()、.mouseover() 等等對應的方法。

不過，值得注意的是，JQuery 提供了 .toggle() 方法，讓元素被點擊的時候，從隱藏變成顯現，或從顯現變成隱藏。這對於設計需要重複開關的元素而言，是非常好用的方法。

那麼，如果我們要在使用者點擊「粉紅貼紙」的字樣時，讓綠色貼紙在顯示時消失，又在消失時出現，應該怎麼用 JQuery 寫呢？

第三，我們不再需要使用 .innerText 屬性，而是改用 .text() 找出元素的 text，並且使用 .text(文字串) 來改變元素的 text。另外，我們也可以使用 .prop(屬性文字串) 這個方法找出元素的某個屬性，並且使用 .css(屬性文字串, 值文字串) 的方式，改變元素屬性的值。

那麼，如果我們要在使用者點擊「粉紅貼紙」的字樣時，把黃色貼紙都變成白色，應該怎麼用 JQuery 寫呢？

答案在這邊：
https://codepen.io/LogosChen/pen/ExvPBmm

想一想：使用 JQuery 寫就的這些指令，如果單純只用 JavaScript 會怎麼寫呢？